<template>
  <div class="channel-edit">
    <van-cell :border="false">
      <template v-slot:title>
        <div class="title-text">
          我的频道
        </div>
      </template>
      <van-button
        @click="isEdit = !isEdit"
        class="edit-btn"
        type="danger"
        plain
        round
        size="mini"
      >
        {{ str }}
      </van-button>
    </van-cell>
    <van-grid class="rem-grid" :gutter="10">
      <van-grid-item
        class="grid-item"
        v-for="(value, index) in channelItem"
        :key="index"
      >
        <template v-slot:icon v-if="index !== 0">
          <van-icon
            :class="{ isEditShow: isEdit }"
            name="clear"
            @click="clearChannel(value, index)"
          ></van-icon>
        </template>
        <template v-slot:text>
          <span
            class="text"
            @click="backChannel(index)"
            :class="{ redactive: index === active }"
            >{{ value.name }}</span
          >
        </template>
      </van-grid-item>
    </van-grid>
    <van-cell :border="false">
      <template v-slot:title>
        <div>
          推荐频道
        </div>
      </template>
    </van-cell>
    <van-grid class="my-grid" :gutter="10">
      <van-grid-item
        class="grid-item"
        v-for="item in recChannels"
        :key="item.id"
        icon="plus"
        :text="item.name"
        @click="addChannel(item)"
      />
    </van-grid>
  </div>
</template>
<script>
import { getAllChannels, addUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
export default {
  props: ['channelItem', 'active'],
  name: 'channelItem',
  data() {
    return { allChannels: null, isEdit: true }
  },

  created() {
    this.loadAllChannels()
  },
  computed: {
    ...mapState(['user']),
    str() {
      return this.isEdit ? '编辑' : '完成'
    },
    recChannels() {
      if (!this.allChannels) {
        return
      }
      return this.allChannels.filter(element => {
        return !this.channelItem.find(el => {
          return el.id === element.id
        })
      })
    }
  },
  methods: {
    backChannel(index) {
      if (this.isEdit) {
        this.$emit('changeActive', index)
      }
    },
    clearChannel(item, index) {
      this.$emit('clearChannel', item, index)
    },

    async addChannel(item) {
      this.channelItem.push(item)
      if (this.user) {
        try {
          // 已登录，数据存储到线上
          await addUserChannel({
            id: item.id, // 频道 id
            seq: this.channelItem.length // 频道的 序号
          })
          this.$toast('添加成功')
        } catch (err) {
          this.$toast('保存失败')
        }
      } else {
        setItem('channels', this.channelItem)
      }
    },
    async loadAllChannels() {
      try {
        const { data } = await getAllChannels()
        this.allChannels = data.data.channels
      } catch (err) {
        this.$toast('获取频道列表数据失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.isEditShow {
  display: none;
}
.redactive {
  color: red !important;
}
.channel-edit {
  padding-top: 100px;
  box-sizing: border-box;
  .title-text {
    font-size: 32px;
    color: #333333;
  }
  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/ .grid-item {
    width: 106px;
    height: 86px;
    .van-grid-item__content {
      background-color: #f4f5f6;
      .van-grid-item__text,
      .text {
        font-size: 24px;
        color: #222;
        margin-top: 0;
      }
    }
  }
  /deep/.my-grid {
    .grid-item {
      .van-grid-item__content {
        position: relative;
        flex-direction: row;
        color: #222;
        .van-icon {
          font-size: 24px;
        }
      }
    }
  }
  /deep/ .van-grid-item__icon-wrapper {
    position: absolute;
    right: 0px;
    top: -10px;
    font-size: 36px;
    z-index: 2;
    color: #ccc;
  }
}
</style>
